<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <title>ajax使用</title>
</head>
<body>
    <div id="app">

    </div>
<!-- 使用ajax接口实现GEt请求 -->
    <script>
        let app = document.getElementById('app')
        // let app = $('#app')
        // console.log(app);

        $.ajax({
            url:'https://autumnfish.cn/search',
            method:'GET',
            data:{
               keywords:'晴天'
            },
            dataType:'JSON',
            success:(res) => {
                console.log(res);
                showList(res.result.songs)
            }
        })
        function showList(songsList) {
            let ol = document.createElement('ol')
            for(let i=0;i<songsList.length;i++) {
                // 创建ol
                let li = document.createElement('li')
                // li.innerHTML = songsList[i].name + '---' + songsLists[i].artist[0].name
                li.innerHTML = `${songsList[i].name} `
                ol.appendChild(li)
        }
        app.appendChild(ol)
    }
    </script>

<!-- js封装实现GET  -->
    <script>

        // 创建请求实例对象
        var myAjax = new XMLHttpRequest()
        // 设置请求url，参数，这是准备工作
        myAjax.open('get','https://autumnfish.cn/search?keywords="天籁月光"')
        // 发送请求
        myAjax.send()
        myAjax.onreadystatechange = function() {
            if (myAjax.readyState == 4 && myAjax.status == 200) {
                console.log(JSON.parse(myAjax.responseText));
            }
        }
    </script>
    
 <!-- post get请求原理 -->
    <script>
        function request(method,url,data,success) {
            var ajax = new XMLHttpRequest()
            if(method.toLowerCase() == 'get') {
                if(data) {
                    url += '?'
                    url += data
                } else {

                }
                ajax.open(method,url)
                ajax.send()
            } else {
                // post 请求
                ajax.open(method,url)
                ajax.setRequestHeader('Content-Type','application/X-www-form-urlencoded')
                ajax.send(data)
            }
        
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4 && ajax.status == 200) {
                success(JSON.parse(ajax.responseText))
            }
            }
        }
        request('post','https://www.fastmock.site/mock/515309f6448031c6323c47dea002d91d/xhr/music','keywords="晴天"',success)
        function success(res) {
            console.log(res);
        }
    </script>

<!-- post请求 -->
    <script>

        // 创建请求实例对象
        var myAjax = new XMLHttpRequest()
        // 设置请求url，参数，这是准备工作
        myAjax.open('post','https://www.fastmock.site/mock/515309f6448031c6323c47dea002d91d/xhr/music')
        myAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded') // post请求一定要设置请求头
        // 发送请求
        myAjax.send(keywords="天空之城")
        myAjax.onreadystatechange = function() {
            if (myAjax.readyState == 4 && myAjax.status == 200) {
                console.log(JSON.parse(myAjax.responseText));
            }
        }
    </script>
</body>
</html>